<template>
<div>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>系统管理</el-breadcrumb-item>
    <el-breadcrumb-item>角色管理</el-breadcrumb-item>
  </el-breadcrumb>

  <el-card class="box-card">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input
          placeholder="请输入内容"
          clearable
          size="small"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            size="small"
          ></el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" size="small">添加角色</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="roles"
      style="width: 100%">
      <el-table-column
        header-align="center"
        align="center"
        type="index"
        label="序号"
      >
      </el-table-column>
      <el-table-column
        prop="roleName"
        label="角色"
        width="180">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="danger" size="mini">删除</el-button>
          <el-button type="warning" size="mini">编辑</el-button>
          <el-button type="primary" size="mini" @click="openPermissionDialog(scope.row.roleId)">分配权限</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-dialog
    title="分配权限"
    :visible.sync="permissionDialogVisible"
    width="60%"
    >
    <div>
      <el-tree
        :props="defaultProps"
        :data="permissions"
        show-checkbox
        node-key="id"
        :default-checked-keys="rolePermissions"
        ref="tree"
        :check-strictly="systemNodeFlag"
      >
      </el-tree>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="permissionDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="authorize">确 定</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: "BzMallRole",
  data(){
    return {
      roles:[],
      permissionDialogVisible:false,
      permissions:[],
      rolePermissions:[],
      roleId:null,
      systemNodeFlag:false,
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  methods:{
    authorize(){
      this.axios.put(`/admin/roles/permission/${this.roleId}`,this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()))
        .then(resp=>{
          this.permissionDialogVisible = false;
          if (resp.data.message == "success") {
            this.$message({
              type:"success",
              message:"更新权限成功"
            })
          }else{
            this.$message({
              type:"error",
              message:"更新权限失败,请稍后重试"
            })
          }
        })
    },
    openPermissionDialog(roleId){
      this.roleId=roleId;
      this.permissionDialogVisible= true;
      this.axios.get("/admin/menu/permission")
        .then(resp=>{
          this.permissions = resp.data.data;
          return this.axios.get(`/admin/roles/permisssion/${this.roleId}`)
        }).then(resp=>{
          this.rolePermissions=resp.data.data.map(p=>p.resourceId);
          this.systemNodeFlag = true  //重点：给数节点赋值之前 先设置为true

          this.$nextTick(() => {//等页面渲染后，再做的处理。
            this.$refs.tree.setCheckedKeys(this.rolePermissions) //给树节点赋值
            this.systemNodeFlag = false //重点： 赋值完成后 设置为false
          })
      })
    }
  },
  created(){
    this.axios.get("/admin/roles")
      .then(resp=>{
        this.roles = resp.data.data;
      })
  }
}
</script>

<style scoped>
  .el-card{
    margin:20px 0;
  }
</style>
